import React, {Component,Fragment} from 'react';
import {connect} from 'dva';
import { Icon ,notification,Row,Col,Button,Form,Input} from 'antd';
import Project from '@/components/GlobalHeader/Project';
import styles from './Login.less'
const FormItem = Form.Item;

@connect()
class LoginPage extends Component {
  constructor(props) {
    super(props);
    this.state={
      password:'',
      username:'',
      company_name: '',
      company_code: '',
    }
  }
  componentDidMount() {
    const that=this;
    document.addEventListener('keyup',function (e) {
      if(e.keyCode===13){
        that.handleSubmit()
      }
    })
  }
  componentWillReceiveProps = (nextProps)=> {
  }
  handleChange=(key,value)=>{
    this.setState({
      [key]:value
    })
  }
  handleSubmit = (e) => {
    const { location } = this.props;
    const { pathname } = location;
    const company_code = pathname.split('/')[3];
    console.log('company_code', company_code);
    if(e){
      e.preventDefault();
    }

    this.props.form.validateFields({ force: true },
      (err, values) => {
        console.log('values',values);
        if (!err) {
          this.props.dispatch({
            type: `login/login`,
            payload: {
              // company_code:company_code,
              ...values,
              // company_id:values.company_id.key,
            },
            callback: () => {

            },
          });
        }
      },
    );
  };

  render() {
    const { submitting, form } = this.props;
    const { getFieldDecorator } = form;
    // const classes = {};
    return <div  className={styles.root} style={{height:'100vh'}}>
      <Row>
        <Col span={9}  className={styles.image} style={{height:'100vh',position:'relative'}}>

          <div style={{width:'100%',position:'absolute',top:'100px',    fontSize: "2rem",
            letterSpacing: "2px",
            textAlign: "center"}}>
            <Project style={{fontSize:'1.8rem'}}></Project>
          </div>
        </Col>
        <Col span={15} className={styles.rightBox} style={{height:'100vh',display:'flex',justifyContent: "center",
          alignItems: 'center'}}>
          <div style={{width:'50%'}}>
            <div>
              <h1 style={{textAlign:'left',color:"#000",marginBottom:'16px',fontWeight:'bold'}}>欢迎登陆</h1>

              <Form style={{ width: '100%' }} >
                <FormItem
                  style={{marginBottom:'4px'}}
                  label={(
                    <span>
              用户名
            </span>
                  )}
                >
                  {getFieldDecorator('username', {
                    rules: [{
                    }],
                  })(
                    <Input
                      size="large"
                      prefix={<Icon type="user" className={styles.prefixIcon}/>}
                      placeholder="请输入用户名"
                    />,
                  )}
                </FormItem>
                <FormItem
                  style={{marginBottom:'10px'}}

                  label={(
                    <span>
              密 码
            </span>
                  )}>
                  {getFieldDecorator('password', {
                    rules: [{
                    }],
                  })(
                    <Input
                      size="large"
                      prefix={<Icon type="lock" className={styles.prefixIcon}/>}
                      type="password"
                      placeholder="请输入密码"
                    />,
                  )}
                </FormItem>
                <FormItem>
                  <Button onClick={this.handleSubmit} size="large" style={{marginTop:'20px'}}  block type="primary" >
                    登录
                  </Button>
                </FormItem>
              </Form>
            </div>
          </div>
        </Col>
      </Row>
    </div>
    /* return (
     <div className={styles.main}>
     <Form onSubmit={this.handleSubmit}>
     <FormItem>
     {getFieldDecorator('username', {
     rules: [{
     required: true, message: '请输入用户名！',
     }],
     })(
     <Input
     size="large"
     prefix={<Icon type="user" className={styles.prefixIcon} />}
     placeholder="用户名"
     />
     )}
     </FormItem>
     <FormItem>
     {getFieldDecorator('password', {
     rules: [{
     required: true, message: '请输入密码！',
     }],
     })(
     <Input
     size="large"
     prefix={<Icon type="lock" className={styles.prefixIcon} />}
     type="password"
     placeholder="密码"
     />
     )}
     </FormItem>
     <FormItem >
     <Button size="large" loading={submitting} block type="primary" htmlType="submit">
     登录
     </Button>
     </FormItem>
     </Form>
     </div>
     );*/
  }

}
export default Form.create()(LoginPage);
